// 动态表单组件，相关文档请查阅FormModel组件
export default {
  props: {
    formData: {
      // 表单项的列表
      // 有下拉列表，将列表数据存储在'selectList'属性上即可, eg：formData = [{dataIndex: '12345', title: '例子', selectList: [{ label: '下拉选项' , value: '1' }]}]
      // 有额外属性，存储在'$attrs'属性上即可，eg：formData = [{dataIndex: '12345', title: '例子', $attrs: { disabled: true }}]
      // 又额外事件，存储在'$listeners'属性上即可，eg：formData = [{dataIndex: '12345', title: '例子', $listeners: { input: handleInput }}]
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    defaultData: {
      // 表单的默认值(用于编辑场景的初始化值回显)
      type: Object,
      default() {
        return {}
      }
    },
    columnNumber: {
      // 表单列数（需要被24整除）
      type: Number,
      default: 2
    },
    selectOptions: {
      // 配置下拉列表的字段名，默认为label、value
      type: Object,
      default() {
        return {
          labelName: 'label',
          valueName: 'value'
        }
      }
    },
    layoutCol: {
      type: Object,
      default() {
        return {
          labelCol: {
            span: 6
          },
          wrapperCol: {
            span: 18
          }
        }
      }
    },
    fullRowTypes: {
      // 独占一行的表单控件类型  eg：fullRowTypes = ['TEXT_AREA', 'INPUT']
      type: Array,
      default() {
        return []
      }
    },
    loading: {
        // loading的显示控制
        type: Boolean,
        default: true
    },
    //文本框最大值，默认300,反之1500
    maxLength:{
      type: Boolean,
      default: false
    }
  },
  watch: {
    defaultData: {
      immediate: true,
      handler() {
        this.formInfo = { ...this.defaultData }
      }
    }
  },
  data() {
    return {
      formInfo: {}
    }
  },
  mounted() {
    // this.$console(this.formData)
    // this.$console(this.defaultData)
  },
  methods: {
    // 返回表单对象
    getFormInfo() {
      return this.$clone(this.formInfo)
    },
    // 获取表单ref对象
    getFormRef() {
      return this.$refs.form
    },
    getLayout() {
      const layoutData = this.formData
      return (
        <a-row gutter={24} type="flex" justify="start">
          {layoutData.map(row => {
            return (
              <a-col
                span={this.fullRowTypes.includes(row.inputType) ? 24 : 24 / this.columnNumber}
                style={{ display: row.hidden ? 'none' : 'block' }}
              >
                <a-form-model-item
                  label={row.title}
                  prop={row.dataIndex}
                  rules={(!row.hidden && row.$attrs && row.$attrs.rules) || null}
                >
                  {this.getFormWidget(row)}
                </a-form-model-item>
              </a-col>
            )
          })}
        </a-row>
      )
    },
    // 获取单个form组件
    getFormWidget(data) {
      const handleInput = (e, targetData) => {
        if(!e) return 
        let value = e.target ? e.target.value : e
        if (typeof value === 'object') {
          // value = value.join(',')
        }
        console.log(value)
        this.$set(this.formInfo, targetData.dataIndex, value)
        this.$console(this.formInfo)
      }
      const selectOptions = data.selectOptions ? data.selectOptions : this.selectOptions
      const $attrs = data.$attrs || {}
      const $listeners = data.$listeners || {}

      const map = {
        MULTIPLE_SELECT: (
          <a-select
            mode="multiple"
            placeholder="请选择"
            value={this.formInfo[data.dataIndex]}
            onChange={e => {
              handleInput(e, data)
            }}
            props={{ ...$attrs }}
            on={{ ...$listeners }}
            showArrow
          >
            {data.selectList && data.selectList.length
              ? data.selectList.map(item => {
                  // 下拉项列表存储在'selectList'属性上即可
                  return (
                    <a-select-option
                      key={item[selectOptions.valueName || 'value']}
                      value={item[selectOptions.valueName || 'value']}
                    >
                      {item[selectOptions.labelName || 'label']}
                    </a-select-option>
                  )
                })
              : []}
          </a-select>
        ),
        INPUT: (
          <BaseInput
            placeholder="请输入"
            value={this.formInfo[data.dataIndex]}
            onInput={e => {
              handleInput(e, data)
            }}
            disabled={!!$attrs.disabled}
            props={{ ...$attrs }}
            on={{ ...$listeners }}
          />
        ),
        NUMBER: (
          <BaseInputNumber
            placeholder="请输入"
            value={this.formInfo[data.dataIndex]}
            onChange={e => {
              handleInput(e, data)
            }}
            disabled={!!$attrs.disabled}
            props={{ ...$attrs, max: 999999999 }}
            on={{ ...$listeners }}
          />
        ),
        SELECT: (
          <a-select
            placeholder="请选择"
            value={this.formInfo[data.dataIndex]}
            onChange={e => {
              handleInput(e, data)
            }}
            props={{ ...$attrs }}
            on={{ ...$listeners }}
          >
            {data.selectList && data.selectList.length
              ? data.selectList.map(item => {
                  // 下拉项列表存储在'selectList'属性上即可
                  return (
                    <a-select-option
                      key={item[selectOptions.valueName || 'value']}
                      value={item[selectOptions.valueName || 'value']}
                    >
                      {item[selectOptions.labelName || 'label']}
                    </a-select-option>
                  )
                })
              : []}
          </a-select>
        ),
        TEXT_AREA: (
          <BaseTextarea
            placeholder="请输入"
            maxLength={this.maxLength?1500:300}
            value={this.formInfo[data.dataIndex]}
            onInput={e => {
              handleInput(e, data)
            }}
            disabled={!!$attrs.disabled}
            props={{ ...$attrs }}
            on={{ ...$listeners }}
          />
        ),
        Date: (
          <a-date-picker
            value={this.formInfo[data.dataIndex]}
            onChange={e => {
              handleInput(e, data)
            }}

            props={{ ...$attrs }}
            on={{ ...$listeners }}
          />
        )
      }
      return map[data.inputType] || ''
    }
  },

  render() {
    return (
      <a-spin props={{spinning: this.loading}}>
        <a-form-model
          ref="form"
          props={{
            ...this.layoutCol,
            ...this.$attrs,
            model: this.formInfo
          }}
        >
          {this.getLayout()}
        </a-form-model>
      </a-spin>
    )
  }
}
